<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="public.css" />
  </head>
  <body>
    <div class="containerInput mg_top20 mg_left20 mg_bt20">
      <input type="text" value="" id="keyword" />
      <button onclick="search()" class="button01">检索</button>
      <button onclick="changePop()" class="button01">添加</button>
    </div>

    <!-- 添加文本区域 -->
    <ul id="lists" class="flex flex-wrap"></ul>

    <!-- 弹窗区域 -->
    <div class="pop flex items-center justify-center" id="pop">
      <div class="pop-container">
        <div id="popTitle">添加</div>
        <div class="pop-form">
          <div class="flex pop-form-item">
            <span class="pop-form-label">标题：</span>
            <input type="text" value="" id="title" class="flex-grow-1 pop-title" />
          </div>
          <div class="flex pop-form-item ">
            <span class="pop-form-label">描述：</span>
            <input type="text" value="" id="content" class="flex-grow-1 pop-content" />
          </div>
        </div>
        <div class="flex flex-end">
          <button onclick="cancel()" class="button01 ">取消</button>
          <button onclick="save()" class="button01 mg_left20 ">确定</button>
        </div>
      </div>
    </div>

    <script src="demo.js"></script>
  </body>
</html>
